import { Component, OnInit, TemplateRef } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Technologiy } from 'src/app/model/technology';
import { FormGroup, FormControl } from '@angular/forms';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-technologies',
  templateUrl: './technologies.component.html',
  styleUrls: ['./technologies.component.css']
})
export class TechnologiesComponent implements OnInit {

  modalRef: BsModalRef
  response: any
  technologies: Technologiy[] = []
  technologiy: Technologiy
  deleteId: number
  name: string
  action: string = 'saved'
  headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  technologiesForm = new FormGroup({
    name: new FormControl('')
  });

  constructor(private http: HttpClient,
    private modalService: BsModalService) {
    this.http.get('/api/technologies')
      .subscribe((data: any) => {
        console.log('/api/technologies', data)
        this.response = data;
        this.response.forEach(element => {
          this.technologies.push(element);
        })
        // this.technologies = objArray
        // this.technologies = Technologiy.fromJson(data)
        console.log('this.technologies', this.technologies)
      })
  }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
  ngOnInit(): void {

  }

  indexTracker(index: number, value: any) {
    return index
  }

  add(): any {
    this.action = 'add'
    this.name = ''
  }
  update(technologiy: Technologiy): any {
    this.action = 'update'
    this.deleteId = technologiy.id
    this.name = technologiy.name
  }


  save(): any {
    if (this.name == '') {
      alert('please enter technology name')
      return
    }
    if (this.action == 'add') {
      this.http.post<any>('/api/technology/' + this.action,
        this.technologiesForm.value,
        { headers: this.headers, reportProgress: true })
        .subscribe((data: any) => {
          console.log('/api/technology/add', data)
          if (data == 'CREATED') {
            alert(this.action + ' technology successfully')
            this.action = 'saved'
            setTimeout(() => {
              window.location.assign('/technologies')
            }, 1000)
          } else {
            alert('add technology error')
          }
        })
    } else {
      this.technologiy = new Technologiy()
      this.technologiy.id = this.deleteId
      this.technologiy.name = this.name
      this.http.put<any>('/api/technology/' + this.action,
        this.technologiy,
        { headers: this.headers, reportProgress: true })
        .subscribe((data: any) => {
          console.log('/api/technology/add', data)
          if (data.status == 'success') {
            alert(this.action + ' technology successfully')
            this.action = 'saved'
            setTimeout(() => {
              window.location.assign('/technologies')
            }, 1000);
          } else {
            alert('update technology error')
          }
        });
    }

  }
  delete(id: number): any {
    console.log('/api/technology/delete/', id)
    this.http.delete('/api/technology/delete/' + id)
      .subscribe((data: any) => {
        console.log('/api/technology/delete/', data)
        if (data.status == 'success') {
          alert('delete technology successfully')
          setTimeout(() => {
            window.location.assign('/technologies')
          }, 1000);
        } else {
          alert('update technology error')
        }
      })
  }
}
